<template>
  <div class="w-full pb-2">
    <div class="grid grid-cols-[1fr_60px] justify-between px-5 pt-5 pb-1">
      <div class="flex flex-col gap-1">
        <div class="text-xl font-bold">NexaAI</div>
        <p class="text-xs text-fontPlaceholde">建立一个属于自己的AI</p>
      </div>
      <div>
        <img alt="logo" class="w-full h-full" src="@/assets/images/openai.svg" />
      </div>
    </div>
    <div class="flex flex-row justify-between items-center py-1 px-4">
      <div class="flex flex-row items-center justify-center gap-1">
        <n-avatar round :size="36" :src="user.avatar" />
        <div class="flex flex-col gap-1 justify-around">
          <p>{{ user.userInfo?.name ?? "" }}</p>
          <p class="text-[10px] text-fontPlaceholde">剩余999+次</p>
        </div>
      </div>
      <el-button round type="primary" size="small" :icon="Plus" @click="ai.ActiveSessionId = null">新增会话</el-button>
    </div>
  </div>
</template>

<script setup lang="ts">
import { Plus } from "@element-plus/icons-vue";
import { useUser } from "@/store/modules/user.ts";
import { UseAI } from "@/store/modules/ai";
import { NAvatar } from "naive-ui";
const user = useUser();
const ai = UseAI();
</script>

<style lang="scss" scoped></style>
